<template>
  <div>
    <el-form class="pad-t-15 form-diy">
      <el-form-item label="上下边距" label-width="80px" class="none-mar-b">
        <div class="flex font-12 pad-r-30">
          <el-slider v-model="details.upperLowerMargins" class="flex-item mar-l-20 mar-r-20"></el-slider>
          <span>{{details.upperLowerMargins}}px(像素)</span>
        </div>
      </el-form-item>
      <el-form-item label="左右边距" label-width="80px" class="none-mar-b pad-b-5">
        <div class="flex font-12 pad-r-30">
          <el-slider v-model="details.sideMargin" class="flex-item mar-l-20 mar-r-20"></el-slider>
          <span>{{details.sideMargin}}px(像素)</span>
        </div>
      </el-form-item>
      <el-form-item label="背景颜色" label-width="80px" class="none-mar-b pad-b-10">
        <div class="flex font-12 pad-r-30">
          <el-color-picker v-model="details.backColor" class="mar-l-12"></el-color-picker>
        </div>
      </el-form-item>
      <el-form-item label="上传图片" label-width="80px" class="none-mar-b">
        <div class="flex mar-l-12 mar-t-10">
          <el-upload class="avatar-uploader"
          action="/api/common/uploadFiles"
          accept="image/jpeg,image/gif,image/png,image/bmp"
          list-type="picture-card-s"
          :before-upload="beforeUpload" name="files"
          :data="token" :show-file-list="false" :on-success="handleUploadSuccess">
            <img v-if="details.pictureDTO.imgUrl" :src="details.pictureDTO.imgUrl" width="148px" height="148px">
            <i v-else class="el-icon-plus"></i>
          </el-upload>
          <span class="font-12 pad-l-10 mar-t--10 font-gray">建议尺寸：建议图片宽度750px，高度按750宽度等比例缩放</span>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>

</style>

<script>
  import elDragDialog from '@/directive/el-dragDialog'
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'

  export default {
    components: {},
    directives: {
      // 拖动窗口
      elDragDialog
    },
    props: {
      details1: {
        type: Object,
        default: null
      },
      eventId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        details: {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {
            pictureId: '',
            detailsId: '',
            imgUrl: '',
            imgWidth: '',
            imgHeight: ''
          },
          componentGoodsDTOS: [],
          audioDTO: {},
          componentVideoDTO: {},
          formDTO: {}
        },
        fullScreenLoading: null
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.details = this.details1
      this.details.upperLowerMargins = Number(this.details1.upperLowerMargins)
      this.details.sideMargin = Number(this.details1.sideMargin)
      this.token = { accessToken: getToken() }
      const that = this
      this.$bus.$on('resetDetails' + this.eventId, function(details) {
        that.details = details
        that.details.upperLowerMargins = Number(details.upperLowerMargins)
        that.details.sideMargin = Number(details.sideMargin)
      })
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fullScreenLoading = this.$loading({
          lock: true,
          text: '加载中',
          background: 'rgba(255, 255, 255, 0.5)'
        })
        return (isJPG || isBMP || isGIF || isPNG)
      },
      handleUploadSuccess(res, file) {
        this.fullScreenLoading.close()
        if (res.code === 101) {
          this.details.pictureDTO.imgUrl = res.data[0]
          this.$bus.$emit('pictureFormData' + this.eventId, this.details)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      resetDetails() {
        this.details = {
          detailsId: '',
          templateId: '',
          sortNo: 0,
          authorType: 0,
          upperLowerMargins: 0,
          sideMargin: 0,
          backColor: '',
          textDTO: {},
          pictureDTO: {
            pictureId: '',
            detailsId: '',
            imgUrl: '',
            imgWidth: '',
            imgHeight: ''
          },
          componentGoodsDTOS: [],
          audioDTO: {},
          formDTO: {},
          componentVideoDTO: {}
        }
      }
    }
  }
</script>
